<!--  -->
<template>
  <div class="menu noselect">
    <el-scrollbar style="overflow-x: hidden;">
      <div class="left-menu">
        <el-menu :default-active="currentMenu.index" class="el-menu-vertical-demo" background-color="#EEEEEE"
          text-color="#333333" active-text-color="#409eff" @select="handleSelect">
          <el-menu-item index="1">
            <i class="el-icon-menu"></i>
            <span slot="title">当前语言（{{currentSite && currentSite.language && currentSite.language.name}}）</span>
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>站点设置</span>
            </template>
            <el-menu-item index="2-1">
              <i class="icon iconfont icon-songmenhuwangzhan"></i>
              <span>网站信息</span>
            </el-menu-item>
            <el-menu-item index="2-2">
              <i class="icon iconfont icon-SEO"></i>
              <span>SEO设置</span>
            </el-menu-item>
            <el-submenu index="2-3">
              <template slot="title">
                <i class="el-icon-edit"></i>
                <span>代码管理</span>
              </template>
              <el-menu-item index="2-3-1">
                <span style="display: inline-block; padding-left: 24px;">站点代码</span>
              </el-menu-item>
              <el-menu-item index="2-3-2">
                <span style="display: inline-block; padding-left: 24px;">页面代码</span>
              </el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="3">
            <i class="el-icon-tickets"></i>
            <span slot="title">页面管理</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-c-scale-to-original" style="font-size: 20px;"></i>
            <span slot="title">系统管理</span>
          </el-menu-item>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-reading"></i>
              <span>表单管理</span>
            </template>
            <el-menu-item index="5-1">
              <i class="el-icon-document"></i>
              <span>页面表单</span>
            </el-menu-item>
            <el-menu-item index="5-2">
              <i class="el-icon-notebook-2"></i>
              <span>系统表单</span>
            </el-menu-item>
          </el-submenu>
          <hr />
          <el-submenu index="6">
            <template slot="title">
              <i class="el-icon-files"></i>
              <span>资源管理</span>
            </template>
            <el-menu-item index="6-1">
              <i class="el-icon-receiving"></i>
              <span>资源库</span>
            </el-menu-item>
            <el-menu-item index="6-2">
              <i class="el-icon-discount"></i>
              <span>资源标签</span>
            </el-menu-item>
            <el-menu-item index="6-4">
              <i class="el-icon-news"></i>
              <span>水印设置</span>
            </el-menu-item>
            <el-menu-item index="6-3">
              <i class="el-icon-milk-tea"></i>
              <span>资源回收站</span>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="7">
            <template slot="title">
              <i class="el-icon-sunset"></i>
              <span>整站管理</span>
            </template>
            <el-menu-item index="7-1">
              <i class="el-icon-wallet"></i>
              <span>域名设置</span>
            </el-menu-item>
            <el-menu-item index="7-2">
              <i class="el-icon-s-tools"></i>
              <span>整站设置</span>
            </el-menu-item>
            <el-menu-item index="7-3">
              <i class="el-icon-document-checked"></i>
              <span>黑/白名单</span>
            </el-menu-item>
            <el-menu-item index="7-5">
              <i class="el-icon-magic-stick"></i>
              <span>关键词过滤</span>
            </el-menu-item>
            <el-menu-item index="7-4">
              <i class="el-icon-message"></i>
              <span>消息通知</span>
            </el-menu-item>
          </el-submenu>
          <el-menu-item index="9">
            <i class="el-icon-s-promotion"></i>
            <span slot="title">推广管理</span>
          </el-menu-item>
          <el-menu-item index="11">
            <i class="el-icon-coin"></i>
            <span slot="title">备份管理</span>
          </el-menu-item>
          <el-menu-item index="10">
            <i class="el-icon-folder"></i>
            <span slot="title">虚拟目录</span>
          </el-menu-item>
          <el-menu-item index="8">
            <i class="el-icon-notebook-1"></i>
            <span slot="title">操作日志</span>
          </el-menu-item>
        </el-menu>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as functions from '@/core/functions.js'
export default {
  created () {
    functions.hostSetup().then(setup => {
      if (setup && setup.backup && setup.backup === 1) {
        this.backupDisabled = false
      } else {
        this.backupDisabled = true
      }
    })
  },
  data () {
    return {
      backupDisabled: false
    }
  },
  computed: {
    ...mapGetters(['currentMenu', 'currentSite'])
  },
  methods: {
    handleSelect (key) {
      let params = {
        index: key
      }
      if (parseInt(key) === 11 && this.backupDisabled) {
        this.$message.error('无权使用备份功能，请购买增值！')
      }
      this.$store.dispatch('menuChange', params)
    }
  }
}

</script>

<style scoped>
.menu .el-scrollbar__wrap {
  overflow-x: hidden;
  overflow-y: auto;
}
.menu .el-scrollbar {
  border-right: 1px solid #e1e1e1;
}
.menu {
  width: 220px;
  height: 100vh;
  height: calc(100vh - 45px);
  background-color: #eeeeee;
}
.left-menu {
  padding-bottom: 60px;
  background-color: #eeeeee;
}
.menu .icon {
  margin-right: 5px;
  width: 24px;
  text-align: center;
  font-size: 18px;
  vertical-align: middle;
  /* speak: none; */
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
}
.left-menu .el-menu-item:hover, .left-menu .el-menu-item:focus {
  background: #fff !important;
}
.left-menu /deep/ .el-submenu__title:hover, .left-menu /deep/ .el-submenu__title:focus {
  background: #fff !important;
}
</style>
